<template>
  <div class="app-container">
		<!--操作-->
		<el-row style="margin-bottom: 10px;">
			<el-col :xs="24" :sm="24" :lg="24">
				<el-tooltip content="添加" placement="top">
					<el-button
						v-waves
						type="success"
						icon="el-icon-plus"
						circle
						@click="handleCreate"
					/>
				</el-tooltip>
			</el-col>
		</el-row>
    <!-- 表格 -->
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="ID" align="center" width="200" fixed>
        <template slot-scope="{row,$index}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" min-width="100px" fixed>
        <template slot-scope="scope">
          <span class="link-type">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="描述" width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.description }}</span>
        </template>
      </el-table-column>
			<el-table-column label="父级分类" width="150px" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.parent_id }}</span>
				</template>
			</el-table-column>
			<el-table-column label="分类图片" width="150px" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.img }}</span>
				</template>
			</el-table-column>
      <el-table-column label="状态" width="110px" align="center">
        <template slot-scope="scope">
          <span
            :class="{'el-icon-success text-green':scope.row.status == 1,'el-icon-error text-red':scope.row.status == 0}"
          >{{ scope.row.status }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="120px" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-tooltip content="编辑" placement="top">
            <el-button
              v-waves
              type="primary"
              icon="el-icon-edit-outline"
              circle
              @click="handleUpdate(scope.$index,scope.row.id)"
            />
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button
              v-waves
              :loading="scope.row.delete"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="handleDelete(scope.$index,scope.row.id)"
            />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-show="total>0"
        :current-page="listQuery.page"
        :page-sizes="[10,20,30, 50]"
        :page-size="listQuery.psize"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

		<!-- 表单 -->
		<categoryForm ref="fromCategory" @updateRow="updateRow" />
  </div>
</template>

<script>
import waves from '@/directive/waves'
import { getAll } from '@/api/index'
import categoryForm from './category/form'

export default {
  name: 'Category',
  directives: {
    waves
  },
  filters: {},
  components: {
		categoryForm,
	},
  data() {
    return {
      list: null,
      listQuery: {
        page: 0,
        psize: 0
      },
      total: 0,
      listLoading: false,
      tableKey: 0
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.listLoading = true
      // 获取数据
      getAll(this.listQuery).then((res) => {
        // 绑定数据
        console.log(res)
        this.list = res.data
        this.total = 12
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
		handleCreate() {

		},
    handleUpdate() {

    },
		updateRow(temp){

		},
    handleDelete() {

    },

    handleSelectionChange() {

    },
    handleSizeChange() {

    },
    handleCurrentChange() {

    }
  }
}
</script>

<style lang="scss">

</style>
